<!--  -->
<template>
  <div class="mytodos">
    <!-- 标题开始 -->
    <div class="mytodos-header">
      <h1>todos</h1>
    </div>
    <!-- 标题结束 -->
    <!-- 内容开始 -->
    <div class="mytodos-content">
      <!-- 顶部开始 -->
      <div class="mytodos-content-top">
        <div
          :class="['content-top-left', { allchecked: quanhue }]"
          @click.stop="quanxun"
        >
          >
        </div>
        <div class="content-top-right">
          <input type="text" @keyup.13="shuru" v-model="kval" />
        </div>
      </div>
      <!-- 顶部结束 -->
      <!-- 中间列表开始 -->
      <div class="mytodos-content-mid">
        <div class="content-mid-list">
          <div
            class="mid-list-item"
            v-for="(item, index) in filtrationarr"
            :key="item.id"
          >
            <div class="list-item-left">
              <input type="checkbox" name="" id="" v-model="item.status" />
            </div>
            <div
              :class="['list-item-mid', { compale: item.status }]"
              @dblclick="changeindex(index)"
            >
              <span :class="['title', { hidden: dindex === index }]">{{
                item.text
              }}</span>
              <input
                type="text"
                v-model="item.text"
                :class="[{ hidden: dindex !== index }]"
                @blur="midiex"
                v-focus
              />
            </div>
            <div class="list-item-right" @click.stop="delettiao(index)">X</div>
          </div>
        </div>
      </div>
      <!-- 中间列表结束 -->
      <div class="todos-foot">
        <div class="todos-foot-left">{{ remainarr }}项剩下</div>
        <div class="todos-foot-midd">
          <div
            @click="activatepink('全部')"
            :class="['foot-midd-left', { activated: activatekk === '全部' }]"
          >
            全部
          </div>
          <div
            @click="activatepink('激活')"
            :class="['foot-midd-mid', { activated: activatekk === '激活' }]"
          >
            激活
          </div>
          <div
            @click="activatepink('完成')"
            :class="['foot-midd-right', { activated: activatekk === '完成' }]"
          >
            完成
          </div>
        </div>
        <div class="todos-foot-right" @click="deleteachieve">清楚已完成</div>
      </div>
    </div>
    <!-- 内容结束 -->
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      activatekk: "全部", //显示粉色框框
      dindex: -1, //正在编辑的
      kval: "", //要加的内容
      arr:JSON.parse(localStorage.getItem("todos") || "[]") 
      // [
      //   {
      //     text: "吃饭",
      //     status: true, // active=>false  completed=> true
      //     id: 1,
      //   },
      //   {
      //     text: "吃饭",
      //     status: false,
      //     id: 2,
      //   },
      // ],
    };
  },
  //监听属性 类似于data概念
  computed: {
    filtrationarr: function () {
      //点击转到相应界面
      if (this.activatekk === "全部") {
        return this.arr;
      } else if (this.activatekk === "激活") {
        return this.arr.filter((v) => {
          return !v.status; //false是没有被选中的，filter是要true才保留，取个反
        });
      } else if (this.activatekk === "完成") {
        return this.arr.filter((v) => {
          return v.status;
        });
      }
    },
    remainarr: function () {
      //还剩下几项
      let remanintodo = this.arr.filter((v) => {
        if (!v.status) {
          return true;
        }
      });
      return remanintodo.length;
    },
    quanhue: function () {
      //全选的状态
      let checked = true;
      this.arr.map((v) => {
        if (v.status === false) {
          checked = false;
        }
      });
      return checked;
    },
  },
  //监控data中的数据变化
  watch: {
    arr: {
      handler: function (arr) {
        localStorage.setItem("todos", JSON.stringify(arr));
      },
      deep: true,
    },
  },
  //方法集合
  methods: {
    deleteachieve: function () {
      let okarr = this.arr.filter((v) => {
        return !v.status;
      });
      this.arr = okarr;
    },
    activatepink: function (num) {
      //加上粉色框框
      this.activatekk = num;
    },
    midiex: function () {
      //失去光标时，使编辑框框消失
      this.dindex = -1;
    },
    changeindex: function (num) {
      //双击事件，编辑框框出现
      this.dindex = num;
    },
    delettiao: function (num) {
      //删除那一条框框
      this.arr.splice(num, 1);
    },
    shuru: function () {
      //回车事件，输入的插入底下
      if (!this.kval) {
        this.$message({
          message: "输入不能为空",
          type: "warning",
        });
        return false;
      }
      this.arr.push({
        text: this.kval,
        status: false,
        id: Date.now(),
      });
    },
    quanxun: function () {
      //全选方法
      // this.quanhue = true;
      let newarr = JSON.parse(JSON.stringify(this.arr));
      newarr.map((v) => {
        v.status = true;
      });
      this.arr = newarr;
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  directives: {
    focus: {
      inserted: function (el) {
        el.focus();
      },
    },
  },
};
</script>
<style lang='less' scoped>
.hidden {
  display: none;
}
.show {
  display: block;
}
.mytodos {
  width: 50vw;
  margin: 0 auto;
  .mytodos-header {
    h1 {
      height: 50px;
      line-height: 50px;
      text-align: center;
    }
  }

  .mytodos-content {
    min-height: 500px;
    border: 1px solid #ddd;
    .mytodos-content-top {
      margin-top: 5px;
      padding: 5px;
      height: 30px;
      display: flex;
      .content-top-left {
        height: 30px;
        flex: 1;
        text-align: center;
        // transform: rotate(90deg);
      }
      .allchecked {
        color: red;
      }

      .content-top-right {
        height: 30px;
        flex: 8;
        input {
          height: 100%;
          width: 100%;
        }
      }
    }
    .mytodos-content-mid {
      .content-mid-list {
        .mid-list-item {
          height: 50px;
          display: flex;
          align-items: center;
          .list-item-left {
            display: flex;
            justify-content: center;
            flex: 1;
          }

          .list-item-mid {
            flex: 8;
          }
          .compale {
            color: #ddd;
            text-decoration: line-through;
          }

          .list-item-right {
            visibility: hidden;
            display: flex;
            justify-content: center;
            flex: 1;
          }
        }
        .mid-list-item:hover {
          .list-item-right {
            visibility: visible;
            cursor: pointer;
            display: flex;
            justify-content: center;
            flex: 1;
          }
        }
      }
    }
    .todos-foot {
      padding: 5px;
      height: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .todos-foot-midd {
        .activated {
          border: 1px solid pink;
        }
        display: flex;
        .foot-midd-left {
          margin-right: 5px;
        }

        .foot-midd-mid {
          margin-right: 5px;
        }

        .foot-midd-right {
          margin-right: 5px;
        }
      }
    }
  }
}
</style>